<template>
	<view class="tab-bar-wrapper">
		<view class="tab-bar">
			<view v-for="item in tabList" :key="item.pagePath" @click="redirectTo(item.pagePath)" class="tab-item">
				<uni-icons :type="item.iconType" :size="24" :color="item.color"></uni-icons>
				<text class="tab-text">{{ item.text }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAdmin: false, // 默认显示普通用户导航
				isLoggedIn: false // 添加登录状态判断
			}
		},
		async onShow() {
			await this.checkUserRole();
		},
		async onLoad() {
			await this.checkUserRole();
		},
		methods: {
			async checkUserRole() {
				try {
					// 检查用户是否已登录
					const token = uni.getStorageSync('uni_id_token');
					const userInfo = uni.getStorageSync('userInfo');
					
					if (!token || !userInfo) {
						// 未登录，显示普通用户导航
						this.isLoggedIn = false;
						this.isAdmin = false;
						return;
					}
					
					this.isLoggedIn = true;
					
					// 从本地存储读取userRole
					const userRole = uni.getStorageSync('userRole') || [];
					
					// 检查是否为管理员
					if (Array.isArray(userRole) && userRole.includes('admin')) {
						this.isAdmin = true;
					} else {
						this.isAdmin = false;
					}
				} catch (error) {
					console.error('检查用户角色失败:', error);
					// 出错时默认显示普通用户导航
					this.isLoggedIn = false;
					this.isAdmin = false;
				}
			},
			redirectTo(path) {
				// 如果是管理员页面但用户不是管理员，跳转到登录页
				if (path.includes('/admin/') && !this.isAdmin) {
					uni.showToast({
						title: '请先登录管理员账号',
						icon: 'none'
					});
					uni.navigateTo({
						url: '/uni_modules/uni-id-pages/pages/login/login-withoutpwd'
					});
					return;
				}
				
				// 定义 tabBar 页面路径
				const tabBarPages = [
					'/pages/index/index',
					'/pages/circle/circle',
					'/pages/message/MessageCenter/MessageCenter',
					'/pages/user/user'
				];
				
				// 判断是否为 tabBar 页面
				if (tabBarPages.includes(path)) {
					// tabBar 页面使用 switchTab
					uni.switchTab({ url: path });
				} else {
					// 非 tabBar 页面使用 navigateTo
					uni.navigateTo({ url: path });
				}
			}
		},
		computed: {
			tabList() {
				if (this.isAdmin && this.isLoggedIn) {
					// 管理员导航
					return [
						{ pagePath: '/pages/admin/admin/adminuser/adminuser', text: '用户管理', iconType: 'person', color: '#999999' },
						{ pagePath: '/pages/admin/admin/admincontent/admincontent', text: '内容管控', iconType: 'list', color: '#999999' },
						{ pagePath: '/pages/admin/admin/admindata/admindata', text: '数据分析', iconType: 'bar-chart', color: '#999999' },
						{ pagePath: '/pages/admin/admin/adminxitong/adminxitong', text: '系统设置', iconType: 'gear', color: '#999999' },
						{ pagePath: '/pages/user/user', text: '个人中心', iconType: 'contact', color: '#999999' }
					]
				} else {
					// 普通用户导航（包括未登录状态）
					return [
						{ pagePath: '/pages/index/index', text: '首页', iconType: 'home', color: '#999999' },
						{ pagePath: '/pages/circle/circle', text: '校园圈子', iconType: 'chat', color: '#999999' },
						{ pagePath: '/pages/message/MessageCenter/MessageCenter', text: '消息', iconType: 'chatboxes', color: '#999999' },
						{ pagePath: '/pages/user/user', text: '我的', iconType: 'contact', color: '#999999' }
					]
				}
			}
		},
		watch: {
			isAdmin(newVal) {
				if (newVal && this.isLoggedIn) {
					// 获取当前页面路径
					const pages = getCurrentPages();
					const currentPage = pages[pages.length - 1];
					if (currentPage.route !== 'pages/admin/admin/adminuser/adminuser') {
						uni.redirectTo({
							url: '/pages/admin/admin/adminuser/adminuser'
						});
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.tab-bar-wrapper {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		width: 100%;
		background-color: #fff;
		border-top: 1px solid #e5e5e5;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
	}
	
	.tab-bar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 60px;
		background-color: #fff;
		
		.tab-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			flex: 1;
			height: 100%;
			cursor: pointer;
			transition: all 0.3s ease;
			padding: 8px 0;
			
			&:hover {
				background-color: #f5f5f5;
			}
			
			&:active {
				background-color: #e0e0e0;
			}
			
			.tab-text {
				font-size: 12px;
				color: #666;
				margin-top: 4px;
				line-height: 1;
			}
		}
	}
	
	/* 为页面内容添加底部间距，避免被 tabBar 遮挡 */
	.container {
		padding-bottom: 60px;
	}
	
	/* 针对不同页面的底部间距调整 */
	.uni-page-body {
		padding-bottom: 60px;
	}
	
	/* 确保在浏览器中正确显示 */
	/* #ifdef H5 */
	body {
		padding-bottom: 60px;
	}
	
	.tab-bar-wrapper {
		position: fixed !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		z-index: 9999 !important;
	}
	/* #endif */
</style>